אם התקנתם אפליקציית אינטרנט מתקדמת (PWA) בטלפון Android מהדור חדש, יכול להיות שתבחינו שסמל האפליקציה כולל רקע לבן. בגרסה 8.0 של Android הושקעו סמלים מותאמים, שמציגים סמלי אפליקציות במגוון צורות בדגמי מכשירים שונים. סמלים שלא משתמשים בפורמט הזה כוללים רקע לבן.
סמלים שניתן להסתיר הם פורמט חדש של סמלים ל-Chrome ול-Firefox שמאפשר להשתמש בסמלים מותאמים לאפליקציות אינטרנט מתקדמות (PWA), ומעניק לכם יותר שליטה על המראה של הסמל.
האם הסמלים הנוכחיים שלי מוכנים?
מכיוון שסמלים שניתן להסתיר צריכים לתמוך במגוון צורות, צריך לספק תמונה אטומה עם קצת מרווח שאפשר יהיה לחיתוך בדפדפן לצורה ולגודל הנדרשים לכל דפדפן או פלטפורמה.
במפרט של סמלים שניתנים למיסוך מופיע אזור בטוח מינימלי סטנדרטי שכל הפלטפורמות מכבדות. החלקים החשובים של הסמל, כמו הלוגו, חייבים להופיע באזור עגול במרכז הסמל, עם רדיוס שווה ל-40% מרוחב הסמל. יכול להיות ש-10% מהקצה החיצוני ייחתוך בפלטפורמות מסוימות.
אתם יכולים לבדוק אילו חלקים מהסמלים נמצאים באזור הבטוח באמצעות Chrome DevTools. כשאפליקציית ה-PWA פתוחה, פותחים את כלי הפיתוח ומנווטים לחלונית Application. בקטע סמלים, אפשר לבחור באפשרות יש להציג רק את האזור הבטוח המינימלי לסמלים שניתנים למיסוך. כך הסמלים ייחתכו כך שרק האזור הבטוח יהיה גלוי. אם הלוגו שלכם גלוי באזור הבטוח הזה, סימן שהסמל מוכן.
כדי לבדוק את הסמל שניתן להסתרה במגוון צורות של Android, אפשר להשתמש ב-Maskable.app של Tiger Oakes. פותחים סמל, וב-Maskable.app אפשר לנסות צורות וגדלים שונים ולשתף את התצוגה המקדימה עם הצוות.
איך משתמשים בסמלים שניתנים להתאמה (maskable)?
כדי ליצור סמל שניתן להסתרה על סמך סמל קיים, אפשר להשתמש בעורך של Maskable.app. מעלים את הסמל, משנים את הצבע והגודל ומייצאים את התמונה.
אחרי שיוצרים סמל שניתן להסתרה ובודקים אותו בכלי הפיתוח, צריך לעדכן את מניפסט של אפליקציית האינטרנט כך שיצביע על הנכס החדש. המניפסט של אפליקציית האינטרנט מספק מידע על אפליקציית האינטרנט בקובץ JSON, וכולל מערך icons.
השדה purpose מורה לדפדפן איך להשתמש בסמל. כברירת מחדל, למטרה של סמלים מוגדרת הערך "any". ב-Android, הסמלים האלה מוגדרים מחדש ברקע לבן.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
כדי שאפשר יהיה להשתמש במסכה של סמל, צריך להגדיר את הערך של purpose ל-"maskable" כדי לציין שצריך להשתמש בו עם מסכות של סמלים. כך הרקע הלבן יוסר ותוכלו לשלוט טוב יותר במראה של הסמל. אפשר גם לציין כמה מטרות, מופרדות ברווחים (לדוגמה, "any maskable"), אם רוצים להשתמש בסמל שניתן להסתרה ללא מסכה במכשירים אחרים.
תודות
הדף הזה נבדק על ידי Joe Medley.